<template>
  <div class="page_content">
    <el-row :gutter="24">
      <el-col :span="6">
        <div class="card_box">
          <!-- 总共请求了多少次目标站点 -->
          <div class="card_title">今日访问量<i class="el-icon-warning-outline" @click="openMsg(0)"></i></div>
          <div class="card_content">
            <p>{{ days.sum }}</p>
            <p><span>总计访问量 {{ alls.asum }}<i class="el-icon-position"></i></span></p>
          </div>
        </div>
        <div class="card_box">
          <!-- 查询结果显示为售罄的次数 -->
          <div class="card_title">今日售罄访问量<i class="el-icon-warning-outline" @click="openMsg(1)"></i></div>
          <div class="card_content">
            <p>{{ days.over }}</p>
            <p><span>总计售罄访问量 {{ alls.aover }}<i class="el-icon-full-screen"></i></span></p>
          </div>
        </div>
        <div class="card_box">
          <!-- 虚拟页面、查询超时、无效查询、连接关闭、无效登录 合集次数 -->
          <div class="card_title">今日无效访问量<i class="el-icon-warning-outline" @click="openMsg(2)"></i></div>
          <div class="card_content">
            <p>{{ days.whttp }}</p>
            <p><span>总计无效访问量 {{ alls.awhttp }}<i class="el-icon-crop"></i></span></p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card_box">
          <!-- 消耗代理IP数量 -->
          <div class="card_title">今日请求IP数量<i class="el-icon-warning-outline" @click="openMsg(3)"></i></div>
          <div class="card_content">
            <p>{{ days.sip }}</p>
            <p><span>总计请求数量 {{ alls.asip }}<i class="el-icon-connection"></i></span></p>
          </div>
        </div>
        <div class="card_box">
          <!-- 有效代理次数 -->
          <div class="card_title">今日有效IP请求<i class="el-icon-warning-outline" @click="openMsg(4)"></i></div>
          <div class="card_content">
            <p>{{ days.yip }}</p>
            <p><span>总计有效请求 {{ alls.ayip }}<i class="el-icon-magic-stick"></i></span></p>
          </div>
        </div>
        <div class="card_box">
          <!-- 无效代理次数 -->
          <div class="card_title">今日无效IP请求<i class="el-icon-warning-outline" @click="openMsg(5)"></i></div>
          <div class="card_content">
            <p>{{ days.wip }}</p>
            <p><span>总计无效请求 {{ alls.awip }}<i class="el-icon-link"></i></span></p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="24" class="page_search">
          <el-col :span="12">
            <el-form :model="search" label-width="80px">
              <el-form-item prop="customerName" label="客户姓名">
                <el-autocomplete
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入客户姓名"
                  @select="handleSelect"
                  v-model="search.customerName"
                  clearable
                  @clear="cleanSearch"
                  ref="elautocomplete"
                >
                  <template slot-scope="{ item }">
                    <span>{{ item.label }}</span>
                    <span v-show="false">{{ item.value }}</span>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <el-form-item label="详细信息">
                <span class="more_link" @click="getInfo">点击查看</span>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-button icon="el-icon-search"  @click="getSearchSum">查询</el-button>
            <el-button type="primary" @click="regetAll" icon="el-icon-refresh-right">更新</el-button>
            <el-button icon="el-icon-finished"  @click="bulkSums">创建</el-button>
            <!-- <el-button icon="el-icon-finished"  @click="bulkIpl">IPL</el-button> -->
            <h6>更新时间：{{ now }}</h6>
          </el-col>
        </el-row>
        <div id="main" class="page_echart"></div>
      </el-col>
    </el-row>
    <!-- 弹窗 客户信息 -->
    <el-dialog :visible.sync="dialogShow" width="550px">
      <el-row class="cus_info">
        <el-col :span="11">
          <img src="../../../static/character.jpg"/>
          <ul class="cus_tell">
            <li>
              <i class="el-icon-message"></i>   {{ infos.email }}
            </li>
            <li>
              <i class="el-icon-phone-outline"></i>   {{ infos.tell }}
            </li>
            <li>
              <i class="el-icon-location-outline"></i>   {{ infos.address }}
            </li>
          </ul>
        </el-col>
        <el-col :span="13">
          <ul>
            <li><label>客户姓名：</label><span>{{ infos.cusName }}</span></li>
            <li><label>客户性别：</label><span>{{ infos.sex }}</span></li>
            <li><label>出生日期：</label><span>{{ infos.birthday }}</span></li>
            <li> <label>护照编号：</label><span>{{ infos.no }}</span></li>
            <li> <label>护照有效期：</label><span>{{ infos.valid }}</span></li>
            <li> <label>航班日期：</label><span>{{ infos.day | filterTime }}</span></li>
            <li> <label>出发地：</label><span>{{ infos.from | cityName }}</span></li>
            <li><label>目的地：</label><span>{{ infos.to | cityName }}</span></li>
            <li> <label>机票种类：</label><span>{{ infos.type }}</span></li>
          </ul>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "../../http/index";
import code from "../../../static/cityCode.json";
import moment from "moment";
import echarts from 'echarts';
import axios from 'axios';

export default {
  name: "logos",
  data() {
    return {
      // 弹出窗
      dialogShow: false,

      // 查询条件
      search: {
        PASSENGER_PASSPORT: "",
        customerName: ""
      },

      days: {
        sum: 0,
        over: 0,
        sip: 0,
        wip: 0,
        yip: 0,
        whttp: 0
      },

      alls: {
        asum: 0,
        aover: 0,
        asip: 0,
        awip: 0,
        ayip: 0,
        awhttp: 0
      },

      // 远程搜索
      restaurants: [],
      // 计时器
      timeout: null,

      // 数据图表
      charts: '',
      opinion:['虚拟页面', '查询超时', '无效查询', '已售罄', '查询成功', '链接关闭', '无效登录', '登录成功', '登录失败', '下单成功', '下单失败'],
      opinionData:[
        {value: 0, name:'虚拟页面'},
        {value: 0, name:'查询超时'},
        {value: 0, name:'无效查询'},
        {value: 0, name:'已售罄'},
        {value: 0, name:'查询成功'},
        {value: 0, name:'链接关闭'},
        {value: 0, name:'无效登录'},
        {value: 0, name:'登录成功'},
        {value: 0, name:'登录失败'},
        {value: 0, name:'下单成功'},
        {value: 0, name:'下单失败'}
      ],

      now: moment().format('YYYY-MM-DD HH:mm:ss'),

     infos: {
        cusName: '',
        sex: '',
        birthday: '',
        no: '',
        valid: '',
        day: '',
        from: '',
        to: '',
        type: ''
      }
    };
  },
  filters: {
    filterTime: value => {
      return moment(value).format("YYYY-MM-DD");
    },
    cityName: value => {
      for (let i = code.cities.length; i--; ) {
        if (code.cities[i][4] === value) {
          return (
            code.cities[i][6] +
            code.cities[i][5] +
            code.cities[i][0] +
            "[" +
            code.cities[i][4] +
            "]"
          );
        } else {
          for (let j = code.cities[i][11].length; j--; ) {
            if (code.cities[i][11][j][2] === value) {
              return (
                code.cities[i][6] +
                code.cities[i][5] +
                code.cities[i][11][j][4] +
                "[" +
                code.cities[i][11][j][2] +
                "]"
              );
            }
          }
        }
      }
    }
  },
  // 加载实例后执行
  mounted() {
    // 总统计
    this.getAllSum();
    // 今日统计
    this.getDaySum();
    // 图表数据初始化
    this.getSearchSum();
    // 获取所有客户
    this.loadAll();
  },
  methods: {
    // 图表
    drawPie(id){
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          x: 'left',
          data:this.opinion
        },
        color: ['#d4d0d0','#f3715c','#74787c','#52b4d7','#019ad6','#d45e25','#018792','#00ae9d','#f56c6c','#b2d335','#886a45'],
        series: [{
          name:'访问结果',
          type:'pie',
          radius:['50%','70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '16'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:this.opinionData
        }]
      })
    },
    // 提示文字
    openMsg(number) {
      let msglist = ['请求目标站点次数', '查询售罄次数', '虚拟页面、查询超时、无效查询、连接关闭、无效登录次数', '代理IP消耗量', '代理成功次数', '无效代理次数']
      this.$message({
        showClose: true,
        message: msglist[number]
      });
    },
    // 获取所有客户
    loadAll() {
      let list = [];
      let params = {  mark: 1 };
      post("/api/customer/getCustomerAll", params).then(res => {
        if (res.success) {
          for (let i = res.data.length; i--; ) {
            list.push({
              value: res.data[i].PASSENGER_PASSPORT,
              label: res.data[i].PASSENGER_LASTNAME + res.data[i].PASSENGER_FIRSTNAME
            });
          }
          this.restaurants = list;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 总统计数据
    getAllSum () {
      let _this = this;
      get("/api/sums/getAllSum").then(res => {
        if (res.success) {
           let asum = JSON.parse(JSON.stringify(res.data[0]).substring(5, JSON.stringify(res.data[0]).length - 1))
          _this.alls = asum;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 今日统计数据
    getDaySum () {
      let _this = this;
      let params = {
        days: moment().format('YYYY-MM-DD')
      };
      post("/api/sums/getDaySum", params).then(res => {
        if (res.success) {
          let dsum = JSON.parse(JSON.stringify(res.data[1]).substring(5, JSON.stringify(res.data[1]).length - 1))
          _this.days = dsum;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 批量创建今日客户
    bulkSums () {
      let _this = this;
      let time = moment().add(1, 'days').format('YYYY-MM-DD')
      let list = [];
       _this.restaurants.map(item => {
         list.push({
            t_no: item.value,
            t_create: time
          });
       })
      let params = { sums: list }
      console.log(params);
      post("/api/sums/bulkSums", params).then(res => {
        if (res.success) {
          this.$message({
            message: res.message,
            type: "success"
          });
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },

    // 测试IP
    bulkIpl() {
      axios({
        method: 'get',
        url: '/ipl/query.txt',
        params: {
          key: 'NP7455E765',
          word: '',
          count: 100,
          rand: false,
          detail: false
        }
      }).then(res => {
        let list = res.data.split('\r\n');
        list.pop();
        let ipl = [];
        list.map(item => {
          ipl.push({
            t_ipl: item
          })
        })
        let params = { ipls: ipl }
        post("/api/ipl/bulkIpls", params).then(res => {
          console.log(res.success)
        }).catch(err => {
          console.log(err);
        })
      }).catch(err => {
        console.log(err);
      });
    },

    querySearchAsync(queryString, cb) {
      let _this = this;
      let restaurants = _this.restaurants;
      let results = queryString ? _this.createStateFilter(queryString) : restaurants;
      clearTimeout(_this.timeout);
      _this.timeout = setTimeout(() => {
        cb(results);
      }, 200 * Math.random());
    },

    createStateFilter(queryString) {
      let _this = this;
      // 匹配结果
      let restaurants = _this.restaurants;
      // 输入值转换大写
      queryString = queryString.toUpperCase();
      let result = restaurants.filter(
        state => state.label.toUpperCase().indexOf(queryString) === 0
      );
      return result;
    },

    handleSelect(item) {
      let _this = this;
      _this.$nextTick(() => {
        _this.search.customerName = item.label;
        _this.search.PASSENGER_PASSPORT = item.value;
      });
    },

    cleanSearch() {
      let _this = this;
      _this.$nextTick(() => {
        _this.search.customerName = "";
        _this.search.PASSENGER_PASSPORT = "";
      });
    },

    // 根据选择条件查询
    getSearchSum() {
      let _this = this;
      let params = {
        t_no: _this.search.PASSENGER_PASSPORT === undefined || null ? "" : _this.search.PASSENGER_PASSPORT,
        mark: 1
      };
      post('/api/sums/getSearchSum', params).then(res => {
        if (res.success) {
          let searchSum = JSON.parse(JSON.stringify(res.data[1]).substring(5, JSON.stringify(res.data[1]).length - 1))
          _this.opinionData = [
            {value: searchSum.close, name:'链接关闭'},
            {value: searchSum.ctime, name:'查询超时'},
            {value: searchSum.xny, name:'虚拟页面'},
            {value: searchSum.wsearch, name:'无效查询'},
            {value: searchSum.over, name:'已售罄'},
            {value: searchSum.search, name:'查询成功'},
            {value: searchSum.wlogo, name:'无效登录'},
            {value: searchSum.logo, name:'登录成功'},
            {value: searchSum.flogo, name:'登录失败'},
            {value: searchSum.success, name:'下单成功'},
            {value: searchSum.loser, name:'下单失败'}
          ];
          this.drawPie('main');
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },

    // 获取客户详细信息
    getInfo () {
      let _this = this;
      if(_this.search.PASSENGER_PASSPORT){
        let params = {
          PASSENGER_PASSPORT: _this.search.PASSENGER_PASSPORT
        };
        post('/api/customer/getCustomerOne', params).then(res => {
          if (res.success) {
            let data = res.data
            _this.dialogShow = true;
            _this.infos = {
              cusName: data.PASSENGER_LASTNAME + data.PASSENGER_FIRSTNAME,
              sex: data.PASSENGER_GENDER === 'M' || data.PASSENGER_GENDER === 'm' ? '男' : '女',
              birthday: data.PASSENGER_BIRTHDAY,
              no: data.PASSENGER_PASSPORT,
              valid: data.PASSENGER_VALID,
              day: data.PASSENGER_DATE,
              from: data.PASSENGER_FROM,
              to: data.PASSENGER_TO,
              type: data.PASSENGER_CLASS,
              tell: data.PASSENGER_PHONE1,
              address: data.PASSENGER_CITY + data.PASSENGER_ADDRESS,
              email: data.PASSENGER_EMAIL
            }
          } else {
            this.$message({
              message: res.message,
              type: "error"
            });
          }
        }).catch(err => {
          console.log(err);
        });
      } else {
         this.$message({
          message: "请选择客户",
          type: "error"
        });
      }
    },

    regetAll() {
      let _this = this;
      _this.now = moment().format('YYYY-MM-DD HH:mm:ss');
      // 总统计
      _this.getAllSum();
      // 今日统计
      _this.getDaySum();
      // 图表数据初始化
      _this.getSearchSum();
      // 获取所有客户
      _this.loadAll();
    }
  }
};
</script>

<style lang='scss'>
@import "./index.scss";
</style>
